import React, { Component } from 'react'
import './index.css'

export default class A extends Component {

    // 编码时才确定为父子, 在父组件中调render, B中的组件可以随意确定, 预留, 动态传入第三方组件

    render() {
        return (
            <div className='parent'>
                <h2>I am A</h2>
                <B render={(message) => <C msg={message}/>}>
                </B>
            </div>
        );
    }
}
class B extends Component {
    state = { message: 'yeah!' }
    render() {
        const { message } = this.state
        return (
            <div className='child'>
                <h2>I am B {this.props.render(message)}</h2>
                {/* <C /> */}
            </div>
        );
    }
}
class C extends Component {
    render() {
        return (
            <div className='grand'>
                <h2>I am C, {this.props.msg}</h2>
            </div>
        );
    }
}